<template>
  <ElAside width="240px" class="left">
    <div class="search">
      <ElInput v-model:value="filterText" placeholder="搜索" size="small">
        <!-- <ElIcon><Search /></ElIcon> -->
      </ElInput>
    </div>
    <ElTree
      ref="tree2"
      :data="nodeData"
      node-key="id"
      :default-expanded-keys="['source', 'learn', 'attack']"
      :icon="ArrowRight"
      :render-content="renderContentFunction"
      :filter-node-method="filterNode"
      :props="defaultProps"
    />
  </ElAside>
</template>

<script>
import * as Vue from 'vue'
import { getTaskMenu } from '@/api/task'
import { Search, Coin, MagicStick, StarFilled } from '@element-plus/icons-vue'
import { ElIcon } from 'element-plus'
import { h, ref, defineProps, onMounted, resolveDynamicComponent } from 'vue'
import { ElTree, ElTooltip } from 'element-plus'
import * as Icons from '@element-plus/icons-vue'

export default {
  components: {
    ElIcon,
    Search,
    Coin,
    MagicStick,
    StarFilled,
  },
  data() {
    return {
      nodeData: [],
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    },
  },
  mounted() {
    getTaskMenu().then((data) => {
      // console.log(data)
      this.nodeData = data
    })
  },
  methods: {
    // kkkk
    renderContentFunction(h, { node, data }) {
      // console.log(node, data)
      const iconComponent = data.icon ? (data.icon === 'Coin' ? Coin : StarFilled) : null
      const className = node.expanded ? 'FolderOpened' : 'Folder'
      const classNameChild = !data.children && data.icon ? data.icon : ''

      return h(
        'div',
        {
          class: { leafNode: !data.children },
          style: {
            height: '38px',
            lineHeight: '38px',
            fontSize: '12px',
            color: '#1b1c23',
          },
        },
        [
          h(
            'el-tooltip',
            {
              content: data.label,
              placement: 'top-end',
              disabled: !!data.children,
            },
            [
              h(
                'span',
                {
                  draggable: !data.children,
                  id: data.id,
                  onDragstart: this.dragHandle, // 注意事件监听的变化
                  class: 'node',
                  style: {
                    // display: 'inline-block',
                    marginTop: '4px',
                    height: '30px',
                    lineHeight: '30px',
                    width: '140px',
                    borderRadius: '4px',
                    position: 'relative',
                    outline: 'none',
                    border: !data.children ? '1px solid transparent' : 'none',
                    display: 'flex', // 设置flex布局
                    alignItems: 'center', // 垂直居中对齐
                    // color: '#00cdea', // 图标颜色
                  },
                },
                [
                  h(
                    iconComponent
                      ? h(resolveDynamicComponent(iconComponent), {
                        class: 'icon-size',
                      })
                      : null,
                    {
                      // 这里不就是树的图标吗
                      // class: {
                      //   [className]: !!data.children,
                      //   [classNameChild]: !data.children,
                      // },
                      style: {
                        color: '#00cdea',
                        marginLeft: data.children ? '10px' : '15px',
                        width: '20px',
                      },
                    },
                  ),
                  h(
                    'span',
                    {
                      style: {
                        fontSize: '13px',
                        marginLeft: '10px',
                      },
                    },
                    data.label,
                  ),
                ],
              ),
            ],
          ),
        ],
      )
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    dragHandle(ev) {
      // console.log('Tree dragHandle')
      ev.dataTransfer.setData('target', ev.target.id)
    },
  },
}
</script>
<style scoped>
.icon-size {
  width: 20px; /* 或使用 'font-size: 20px;' 也可以 */
  height: 20px; /* 确保宽高相等，以保持图标比例 */
}
</style>
